<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="pdf-table.css" media=all>
    <title>标线故障处理</title>
    <style>
        .overflow_pic {
            position: relative;
        }

        .pic_size {
            height: 280px;
            width: 260px;
        }

        FF
        .pic_list {
            position: absolute;
            z-index: 1;
            transition: 1s;
        }

        .pic_list img {
            float: left;
            height: 280px;
            width: 260px;
        }

        .index {
            display: block;
        }

        .cleanfix {
            overflow: hidden;
            height: 280px;
        }

        .arrow {
            position: absolute;
            top: 180px;
            z-index: 3;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
        }

        .next {
            right: 11%;
        }

        .click_room {
            cursor: pointer;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10%;
            left: 5%;
            z-index: 2;
        }

        .active {
            display: block !important;
        }

        .img-content {
            width: 100%;
        }

        .img-content img {
            width: 100%;
            display: none;
        }

        .next2 {
            background-color: #ddd;
            border: none;
        }

        .prev2 {
            background-color: #ddd;
            border: none;

        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-body">
        <table id="mainDataTables" class="table table-bordered table-striped" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>序号</th>
                <th>标线图片</th>
                <th>故障图片</th>
                <th>地址</th>
                <th>道路</th>
                <th>故障类型</th>
                <th>故障等级</th>
                <th>维修进度</th>
                <th>维修人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<div id="supplyMaintenanceModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="supplyMaintenanceLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 540px;">
        <div class="modal-content">
            <form id="supplyMaintenanceForm" name="supplyMaintenanceForm"
                  class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick='$.clearModal($("#supplyMaintenanceForm"), $("#supplyMaintenanceModal"))'>
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <b class="modal-title" id="supplyMaintenanceLabel"></b>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">故障原因</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control"
                                           id="maintenanceReasonSupply" name="maintenanceReason"
                                           placeholder="故障原因" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">反馈内容</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control"
                                           id="maintenanceFeedbackSupply" name="maintenanceFeedback"
                                           placeholder="反馈内容" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">施工方案</label>
                                <div class="col-sm-10">
                                        <textarea class="form-control" rows="8" cols="40"
                                                  placeholder="请输入施工方案" style="resize: none"
                                                  id="maintenanceContentSupply" name="maintenanceContent"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="maintenanceIdSupply" name="maintenanceId"/>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                            onclick='$.clearModal($("#supplyMaintenanceForm"), $("#supplyMaintenanceModal"))'>
                        <i class="fa fa-trash-o"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary btn-flat">
                        <i class="fa fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="updateMaintenanceModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="updateMaintenanceLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <form id="updateMaintenanceForm" name="updateMaintenanceForm"
                  class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick='$.clearModal($("#updateMaintenanceForm"), $("#updateMaintenanceModal"))'>
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <b class="modal-title" id="updateMaintenanceLabel"></b>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">地址</label>
                                <div class="col-sm-3" style="padding-right: 0">
                                    <input type="text" class="form-control" id="provinceUpdate"
                                           placeholder="省" style="padding-right: 10px" readonly>
                                </div>
                                <div class="col-sm-3" style="padding-left: 7px; padding-right: 7px">
                                    <input type="text" class="form-control" id="cityUpdate"
                                           placeholder="市" style="padding-right: 10px" readonly>
                                </div>
                                <div class="col-sm-3" style="padding-left: 0">
                                    <input type="text" class="form-control" id="areaUpdate"
                                           placeholder="区/县" style="padding-right: 10px" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">坐标</label>
                                <div class="col-sm-8" style="padding-right: 0">
                                    <input type="text" class="form-control" id="coordinate"
                                           style="padding-right: 0" placeholder="坐标" readonly>
                                </div>
                                <div class="col-sm-1">
                                    <button type="button" style="height: 34px;float: right;" class="myBtnUpdate"><i
                                            class="fa fa-map-marker"></i></button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="roadNameUpdate" class="col-sm-3 control-label">路名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="roadNameUpdate"
                                           placeholder="路名" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="startRoadUpdate" class="col-sm-3 control-label">起始路口</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="startRoadUpdate"
                                           placeholder="起始路口" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="endRoadUpdate" class="col-sm-3 control-label">结束路口</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="endRoadUpdate"
                                           placeholder="结束路口" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="maintenanceReasonUpdate" class="col-sm-3 control-label">故障原因</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="maintenanceReasonUpdate"
                                           placeholder="故障原因" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">施工方案</label>
                                <div class="col-sm-9">
                                        <textarea class="form-control" rows="6" cols="40" style="resize: none" readonly
                                                  id="maintenanceContentUpdate"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">完工图片</label>
                                <div class="col-sm-9">
                                    <img id="maintenancePic" name="maintenancePic" onclick="$.openUpPic()"
                                         style="height: 185px; width: 260px" src="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="maintenanceSelect" class="col-sm-3 control-label">维修人员</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="maintenanceSignStatus"
                                            id="maintenanceSelect">
                                        <option value="0">安全</option>
                                        <option value="1">不安全</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="maintenanceTimeUpdate" class="col-sm-3 control-label">维修日期</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="maintenanceTimeUpdate"
                                           name="maintenanceTime" placeholder="维修日期">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">施工说明</label>
                                <div class="col-sm-9">
                                        <textarea class="form-control" rows="6" cols="40" style="resize: none"
                                                  id="maintenanceExplainUpdate" name="maintenanceExplain"
                                                  placeholder="施工说明"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="maintenanceIdUpdate" name="maintenanceId"/>
                <input type="hidden" id="maintenancePicUpdate" name="maintenancePic"/>
                <input type="hidden" id="roadSignIdUpdate" name="roadSignId"/>
                <input type="hidden" id="maintenancePeopleIdUpdate" name="maintenancePeopleId"/>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                            onclick='$.clearModal($("#updateMaintenanceForm"), $("#updateMaintenanceModal"))'>
                        <i class="fa fa-trash-o"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary btn-flat">
                        <i class="fa fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="upPictureModal" tabindex="-1" role="dialog"
     aria-labelledby="upPictureModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$.closeUpPhModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <b class="modal-title" id="upPictureModalLabel"></b>
            </div>
            <div class="modal-body row">
                <div id="container" class="col-sm-12">
                    <a id="selectfiles" href="javascript:void(0);" class='btn btn-primary'>
                        <span class='glyphicon glyphicon-picture'></span> 选择图片</a>
                    <a id="postfiles" href="javascript:void(0);" class='btn btn-success'>
                        <span class='glyphicon glyphicon-send'></span> 开始上传</a>
                </div>
                <div id="ossfile" class="col-sm-12" style="margin-top: 20px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$.closeUpPhModal()">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 取消
                </button>
                <button type="button" class="btn btn-success" onclick="$.doneUpPhoto()">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成
                </button>
            </div>
        </div>
    </div>
</div>

<div id="showMaintenanceModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="showMaintenanceLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <form id="showMaintenanceForm" name="showMaintenanceForm"
                  class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick='$.clearModal($("#showMaintenanceForm"), $("#showMaintenanceModal"))'>
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <b class="modal-title" id="showMaintenanceLabel"></b>
                    <button type="button" id="pdf-btn" class="btn btn-primary btn-flat">打印</button>
                </div>
                <!-- <div class="modal-body">
                     <div class="row">
                         <div class="col-sm-6">
                             <div class="form-group">
                                 <label class="col-sm-3 control-label">地址</label>
                                 <div class="col-sm-3" style="padding-right: 0">
                                     <input type="text" class="form-control" id="provinceShow"
                                            placeholder="省" style="padding-right: 10px" readonly>
                                 </div>
                                 <div class="col-sm-3" style="padding-left: 7px; padding-right: 7px">
                                     <input type="text" class="form-control" id="cityShow"
                                            placeholder="市" style="padding-right: 10px" readonly>
                                 </div>
                                 <div class="col-sm-3" style="padding-left: 0">
                                     <input type="text" class="form-control" id="areaShow"
                                            placeholder="区/县" style="padding-right: 10px" readonly>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label class="col-sm-3 control-label">坐标</label>
                                 <div class="col-sm-8" style="padding-right: 0">
                                     <input type="text" class="form-control" id="coordinate4Show"
                                            style="padding-right: 0" placeholder="坐标" readonly>
                                 </div>
                                 <div class="col-sm-1">
                                     <button type="button" style="height: 34px;float: right;" class="myBtnUpdate"><i
                                             class="fa fa-map-marker"></i></button>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="roadNameShow" class="col-sm-3 control-label">路名</label>
                                 <div class="col-sm-9">
                                     <input type="text" class="form-control" id="roadNameShow"
                                            placeholder="路名" readonly>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="startRoadShow" class="col-sm-3 control-label">起始路口</label>
                                 <div class="col-sm-9">
                                     <input type="text" class="form-control" id="startRoadShow"
                                            placeholder="起始路口" readonly>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="endRoadShow" class="col-sm-3 control-label">结束路口</label>
                                 <div class="col-sm-9">
                                     <input type="text" class="form-control" id="endRoadShow"
                                            placeholder="结束路口" readonly>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="maintenanceReasonShow" class="col-sm-3 control-label">故障原因</label>
                                 <div class="col-sm-9">
                                     <input type="text" class="form-control" id="maintenanceReasonShow"
                                            placeholder="故障原因" readonly>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="maintenancePeopleShow" class="col-sm-3 control-label">维修人员</label>
                                 <div class="col-sm-9">
                                     <input type="text" class="form-control" id="maintenancePeopleShow"
                                            placeholder="故障原因" readonly>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="maintenanceContentShow" class="col-sm-3 control-label">施工方案</label>
                                 <div class="col-sm-9">
                                         <textarea class="form-control" rows="6" cols="40" style="resize: none" readonly
                                                   id="maintenanceContentShow"></textarea>
                                 </div>
                             </div>
                         </div>
                         <div class="col-sm-6">
                             <div class="form-group">
                                 <label class="col-sm-3 control-label">完工图片</label>
                                 <div class="col-sm-9">
                                     <img id="maintenancePicShow"
                                          style="height: 185px; width: 260px;cursor: pointer" src="">
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="maintenanceTypeShow" class="col-sm-3 control-label">故障类型</label>
                                 <div class="col-sm-9">
                                     <select class="form-control" name="maintenanceType" id="maintenanceTypeShow"
                                             disabled>
                                         <option value="0">损毁</option>
                                         <option value="1">其他</option>
                                     </select>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="maintenanceLevelShow" class="col-sm-3 control-label">故障等级</label>
                                 <div class="col-sm-9">
                                     <select class="form-control" name="maintenanceLevel" id="maintenanceLevelShow"
                                             disabled>
                                         <option value="0">无</option>
                                         <option value="1">一级</option>
                                         <option value="2">二级</option>
                                         <option value="3">三级</option>
                                         <option value="4">四级</option>
                                         <option value="5">五级</option>
                                     </select>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="maintenanceExplainShow" class="col-sm-3 control-label">完工说明</label>
                                 <div class="col-sm-9">
                                         <textarea class="form-control" rows="8" cols="40" style="resize: none"
                                                   id="maintenanceExplainShow" name="maintenanceExplain" readonly
                                                   placeholder="施工说明"></textarea>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>-->
                <div class="modal-body">
                    <div id="maintenancePdf" style="display: none">
                        <h5>故障施工单</h5>
                        <table>
                            <tr>
                                <th>上报人员</th>
                                <th id="reporter"></th>
                                <th>上报时间</th>
                                <th id="reportTime"></th>
                            </tr>
                            <tr>
                                <th>设施位置</th>
                                <th colspan="3" id="machinePosition"></th>
                            </tr>
                            <tr>
                                <th class="pic_row"><p class="pic_title">故障图片</p></th>
                                <th>
                                    <img style="height: 185px; width: 260px;cursor: pointer" id="faultPic">
                                </th>
                                <th class="pic_row"><p class="pic_title">完工图片</p></th>
                                <th>
                                    <img style="height: 185px; width: 260px;cursor: pointer" id="okPic">
                                </th>
                            </tr>
                            <tr>
                                <th>故障描述</th>
                                <th colspan='3' id="faultInfo"></th>
                            </tr>
                            <tr>
                                <th>故障类型</th>
                                <th id="faultType"></th>
                                <th>故障等级</th>
                                <th id="faultLevel"></th>
                            </tr>
                            <tr>
                                <th>结束时间</th>
                                <th id="endTime"></th>
                                <th>维修金额</th>
                                <th id="spendMoney"></th>
                            </tr>
                            <tr>
                                <th>施工备注</th>
                                <th colspan='3' id="remarks"></th>
                            </tr>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--//地图-->
<div id="modal-map" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="label-map"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <form id="form-map" name="form-map" class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="$.clearModal($('#form-map'), $('#modal-map'))">
                        <span aria-hidden="true">&times;</span></button>
                    <b class="modal-title" id="label-map">地图展示</b>
                </div>
                <div class="modal-body">
                    <iframe src="fault/roadPoleAuditMap.html" id="myMap"
                            style="width: 100%;height: 365px"
                            frameBorder=0
                            scrolling=no></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-flat"
                            onclick="$.clearModal($('#form-map'), $('#modal-map'))">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--图片展示-->
<div id="showPicList" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="showPicLabel" aria-hidden="true" style="z-index: 1500">
    <div class="modal-dialog" style="width: 540px;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="prev2">&lt;</button>
                <button class="next2">&gt;</button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#showPicModal').modal('hide')">
                    <span aria-hidden="true">&times;</span></button>
                <b class="modal-title" id="showPicLabel"></b>
            </div>
            <div class="modal-body" style="position: relative">
                <div class="img-content"></div>
            </div>
        </div>
    </div>
</div>

<script src="../plugins/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/crypto1/crypto/crypto.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/crypto1/hmac/hmac.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/crypto1/sha1/sha1.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/base64.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/upload.js"></script>

<script src="../plugins/pdf/jquery-migrate-1.2.1.min.js"></script>
<script src="../plugins/pdf/jqprint.js"></script>
<script src="fault/roadLineHandle.js"></script>
</body>
</html>